@charset 'utf-8';

$base-font-size: 75px; //design iphone6: 375px * 2 / 10 = 75px; --design
// $base-font-size: 32px; //design iphone3gs: 320px / 10 = 32px
// $base-font-size: 64px; //design iphone4/5: 320px * 2 / 10 = 64px
// $base-font-size: 124.2px; //design iphone6: 414px * 3 / 10 = 124.2px;


@function pxToRem($px) {
	@return  $px / $base-font-size * 1rem;
}
@mixin pxToPx($name,$px) {
	#{$name}: round($px / 2) * 1px;
    [data-dpr="2"] & {
        #{$name}: $px * 1px;
    }
    // for mx3
    [data-dpr="2.5"] & {
        #{$name}: round($px * 2.5 / 2) * 1px; //因为设计稿是2倍稿，所以要除以2
    }
    // for xiaomi note
    [data-dpr="2.75"] & {
        #{$name}: round($px * 2.75 / 2) * 1px;
    }
    [data-dpr="3"] & {
        #{$name}: round($px * 3 / 2 ) * 1px;
    }
    // for sumsang note4
    [data-dpr="4"] & {
        #{$name}: $px * 2px; 
    }
}

@function percent($px, $px2: 1206) {
	@return $px / $px2 * 100%;
}

@function black($opacity){
	@return rgba(0,0,0,$opacity);
}
@function white($opacity){
	@return rgba(255,255,255,$opacity);
}

@mixin reset{
	margin: 0;
	padding: 0;
}

@mixin inline-block{
	display: inline-block;
	*display: inline;
	*zoom: 1;
}

@mixin clearfix{
	*zoom: 1;
	&:before,
	&:after{
		content: "";
		display: table;
		line-height: 0;
	}
	&:after{
		clear: both;
	}
}
%clearfix{
	*zoom: 1;
	&:before,
	&:after{
		content: "";
		display: table;
		line-height: 0;
	}
	&:after{
		clear: both;
	}
}
@mixin size($width, $height) {
	width: $width;
	height: $height;
}
@mixin float($float:left){
	float: $float;
	_display: inline;
}
@mixin float-left{
	float: left;
	_display: inline;
}
@mixin float-right{
	float: right;
	_display: inline;
}
@mixin hide-text{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
@mixin reset-filter {
	filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
@mixin background-color($value) {
	background-color: transparent;
	background-color: $value;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str($value)},endColorstr=#{ie-hex-str($value)});
	zoom: 1;
}
@mixin icon-background($image,$width,$height,$rate:1) {
	background-image:url($image);
    width:pxToRem($width * $rate);
    height:pxToRem($height * $rate);
}
@mixin inline-background($image,$width,$height) {
	display: inline-block;
	background:url($image) no-repeat center;
    width:pxToRem($width);
    height:pxToRem($height);
    background-size:pxToRem($width) pxToRem($height);
}
@mixin background($image,$width,$height,$rate:1) {
	display: inline-block;
	background:url($image) no-repeat center;
    width:pxToRem($width * $rate);
    height:pxToRem($height * $rate);
    background-size:contain;
}
@mixin break {
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
}
@mixin ellipsis {
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    -o-text-overflow: ellipsis; /* Opera 9-10.6 */
    text-overflow: ellipsis;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: top;
    max-width: 100%;
    // _width: 100%;
    text-align: left; /* Chrome 21+ bug */
}
@mixin pre {
	white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}
@mixin wrap {
	text-wrap: wrap;
	white-space: pre-wrap;
	white-space: -moz-pre-wrap;
	word-wrap: break-word;
}
// http://www.hicss.net/solve-change-line-in-css/
@mixin nowrap {
	white-space: nowrap;
	word-break: keep-all;
}
@mixin opacity($opacity) {
	opacity: $opacity;
	filter: alpha(opacity=#{$opacity * 100});
}
@mixin min-height($height) {
	min-height: $height;
	height: auto !important;
	_height: $height;
}
//http://manaten.net/archives/270
@mixin sprite($image, $x, $y, $width, $height) {
	width: $width;
	height: $height;
	display: block;
	overflow: hidden;
	background: $image $x*-1 $y*-1 no-repeat;
	text-indent: 100%;
	white-space: nowrap;
}

//border 
@mixin border($pos, $color) {
    content: "";
    position: absolute;
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    @if $pos=='top'{
        #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else if $pos=='bottom' {
    	 #{$pos}: 0px;
        left: 0px;
        right: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleY(.5);
        -webkit-transform: scaleY(.5);
    } @else {
    	top: 0px;
        bottom: 0px;
        #{$pos}: 0px;
        border-#{$pos}: 1px solid $color;
        transform: scaleX(.5);
        -webkit-transform: scaleX(.5);
    }
}



